<template>
    <view>
        <!-- 创客大礼包列表 -->
        <swiper
            class="swiper_box margin-top-sm margin-lr-sm radius"
            style="box-shadow: 2px 4px 8px 0px #f5f5f5"
            :indicator-dots="indicatorDots"
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration"
        >
            <block v-for="(item, index) in banners" :key="index">
                <swiper-item @tap.stop.prevent="gotoNext" :data-item="item">
                    <image :src="item.pic" class="swiper_box"></image>
                </swiper-item>
            </block>
        </swiper>
        <van-sticky>
            <view :class="'column ' + (isFixedTop ? 'totop' : '')" id="navbar">
                <view class="padding-top padding-bottom-xs padding-lr-xl flexs justify-between">
                    <view :class="'flexs align-center text-lg ' + (typeActive == 1 ? 'text-orange' : ' text-darkGray')" @tap.stop.prevent="switchType" data-id="1">综合</view>
                    <view :class="'flexs align-center text-lg ' + (typeActive == 2 ? 'text-orange' : ' text-darkGray')" @tap.stop.prevent="switchType" data-id="2">销量</view>
                    <view :class="'flexs align-center text-lg ' + (typeActive == 3 ? 'text-orange' : ' text-darkGray')" @tap.stop.prevent="switchType" data-id="3">
                        筛选
                        <image src="/static/images/screen.png" class="shangxia margin-left-xs"></image>
                    </view>
                </view>
            </view>
        </van-sticky>
        <view class="flexs justify-between padding-lr-sm padding-bottom">
            <view>
                <view
                    class="goods_info radius margin-top-sm bg-white"
                    v-if="index % 2 == 0"
                    @tap="toDetail"
                    :data-goodsid="item.id"
                    :data-productSn="item.productSn"
                    v-for="(item, index) in goodslist"
                    :key="index"
                >
                    <view class="p-r">
                        <image class="goods_img" mode="widthFix" :src="item.pic" />
                        <view class="goods_sold padding-lr-sm text-sm text-white" v-if="item.sale">已售: {{ item.sale }}</view>
                    </view>

                    <view class="padding-lr-sm margin-tb-sm text-df text-tline">{{ item.name }}</view>

                    <view :class="item.marker ? 'flexs align-center padding-lr-sm padding-bottom-xs flex-wrap' : 'flexs align-center padding-lr-sm padding-bottom-xs'">
                        <view class="text-price text-red text-df text-bold padding-right-sm">{{ item.price }}</view>
                        <view class="padding-left-sm text-price text-darkGray text-sm text-through" v-if="item.originalPrice && !item.priceMaker">{{ item.originalPrice }}</view>
                        <view class="markerpic" v-if="item.priceMaker">
                            <text class="text-orange">创客</text>
                            <text style="color: #ff1717">￥{{ item.priceMaker }}</text>
                        </view>
                    </view>

                    <view class="markerpic ml-20 mb-20" v-if="item.productType == 2" style="width: fit-content">
                        <text class="text-orange">创客大礼包</text>
                    </view>

                    <!-- <view class="markerpic ml-20 mb-20" wx:if="{{item.productType == 6 || item.productType == 2}}" style="width: fit-content;">
        <text class="text-orange">{{item.productType == 6 ? '199创客礼包' : '创客大礼包'}}</text>
      </view> -->

                    <!-- <view class="markerpic-s" wx:if="{{item.productType == 6 || item.productType == 2}}">
        <text class="markerpic-text">送创客卡</text>
      </view> -->

                    <view class="padding-lr-sm padding-bottom-sm text-sm text-orange" v-if="item.distributionType != 1 && item.distributionType">支持到店自提</view>
                </view>
            </view>
            <view>
                <view
                    class="goods_info radius margin-top-sm bg-white"
                    v-if="index % 2 == 1"
                    @tap="toDetail"
                    :data-goodsid="item.id"
                    :data-productSn="item.productSn"
                    v-for="(item, index) in goodslist"
                    :key="index"
                >
                    <view class="p-r">
                        <image class="goods_img" mode="widthFix" :src="item.pic" />
                        <view class="goods_sold padding-lr-sm text-sm text-white" v-if="item.sale">已售: {{ item.sale }}</view>
                    </view>

                    <view class="padding-lr-sm margin-tb-sm text-df text-tline">{{ item.name }}</view>

                    <view :class="item.marker ? 'flexs align-center padding-lr-sm padding-bottom-xs flex-wrap' : 'flexs align-center padding-lr-sm padding-bottom-xs'">
                        <view class="text-price text-red text-df text-bold padding-right-sm">{{ item.price }}</view>
                        <view class="padding-left-sm text-price text-darkGray text-sm text-through" v-if="item.originalPrice && !item.priceMaker">{{ item.originalPrice }}</view>
                        <view class="markerpic" v-if="item.priceMaker">
                            <text class="text-orange">创客</text>
                            <text style="color: #ff1717">￥{{ item.priceMaker }}</text>
                        </view>
                    </view>

                    <view class="markerpic ml-20 mb-20" v-if="item.productType == 2" style="width: fit-content">
                        <text class="text-orange">创客大礼包</text>
                    </view>

                    <!-- <view class="markerpic ml-20 mb-20" wx:if="{{item.productType == 6 || item.productType == 2}}" style="width: fit-content;">
        <text class="text-orange">{{item.productType == 6 ? '199创客礼包' : '创客大礼包'}}</text>
      </view> -->

                    <!-- <view class="markerpic-s" wx:if="{{item.productType == 6 || item.productType == 2}}">
        <text class="markerpic-text">送创客卡</text>
      </view> -->

                    <view class="padding-lr-sm padding-bottom-sm text-sm text-orange" v-if="item.distributionType != 1 && item.distributionType">支持到店自提</view>
                </view>
            </view>
        </view>
        <!-- 筛选弹窗 -->
        <van-popup :show="active4" position="top" custom-style="height: 20%;" @close="hide">
            <view class="maskbox">
                <view style="width: 670rpx; margin-top: 20rpx">
                    <view class="text-black text-df">价格排序</view>
                    <view class="screenboxsbtn">
                        <view data-index="1" @tap="opgaodi" :class="'screenboxsbtnbox ' + (active3 == 1 ? 'gaodis' : '')">从高到低</view>
                        <view data-index="2" @tap="opgaodi" :class="'screenboxsbtnbox ' + (active3 == 2 ? 'gaodis' : '')">从低到高</view>
                    </view>
                    <view class="text-black text-df">价格区间（元）</view>
                    <view class="screenboxsbtn">
                        <view
                            :data-index="index"
                            @tap="bindtapscreen"
                            :class="'screenbtns text-df ' + (active2 == index ? 'active2' : '')"
                            v-for="(item, index) in activelist"
                            :key="index"
                        >
                            {{ item.min }}-{{ item.max }}
                        </view>
                    </view>
                    <view class="screenboxsbtn" style="margin-top: 60rpx">
                        <view class="screenboxsbtnboxs" @tap="chongzhifun">重置</view>
                        <view class="screenboxsbtnboxss screenboxsbtnboxs" @tap="closemak">完成</view>
                    </view>
                </view>
            </view>
        </van-popup>

        <view style="height: 50rpx"></view>
    </view>
</template>

<script>
const _request = require('../../utils/request.js');

const app = getApp();
export default {
    data() {
        return {
            mallimgUrl: app.globalData.mallimgUrl,
            banners: [],
            //轮播
            indicatorDots: true,
            navbarInitTop: 0,
            isFixedTop: false,
            autoplay: false,
            isOver: false,
            interval: 2000,
            duration: 500,
            ProductList: [],
            //商品列表
            goodslist: [],
            pageSize: 20,
            pageNo: 0,
            filterFlag: false,
            //筛选弹窗
            typeActive: 1,
            //1综合 2销量 3筛选唤起弹窗
            activelist: [
                {
                    min: 0,
                    max: 100
                },
                {
                    min: 100,
                    max: 300
                },
                {
                    min: 300,
                    max: 500
                },
                {
                    min: 500,
                    max: 1000
                }
            ],
            active4: false,
            //筛选弹窗
            active3: -1,
            //价格 1从高到低，2从低到高
            active2: -1 //价格区间下标
        };
    },
    onLoad: function () {
        this.loadAdvertisingList(); //banner列表

        this.querygoods(); //商品列表

        this.setData({
            isOver: app.globalData.isOver
        });
    },
    onShow: function () {
        var that = this;

        if (that.navbarInitTop == 0) {
            //获取节点距离顶部的距离
            uni.createSelectorQuery()
                .select('#navbar')
                .boundingClientRect(function (rect) {
                    if (rect && rect.top > 0) {
                        var navbarInitTop = parseInt(rect.top) + 100;
                        console.log(navbarInitTop, 'navbarInitTop');
                        that.setData({
                            navbarInitTop: navbarInitTop
                        });
                    }
                })
                .exec();
        }
    },
    //监听页面滚动
    onPageScroll: function (e) {
        var that = this;
        var scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度
        //判断'滚动条'滚动的距离 和 '元素在初始时'距顶部的距离进行判断

        var isSatisfy = scrollTop >= that.navbarInitTop ? true : false; //为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等

        if (that.isFixedTop === isSatisfy) {
            return false;
        }

        that.setData({
            isFixedTop: isSatisfy
        });
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.setData({
            pageNo: this.pageNo + 1
        });
        this.querygoods();
    },
    methods: {
        //banner列表
        loadAdvertisingList: function () {
            const that = this;

            _request
                .get(
                    '/banner/getList',
                    {
                        type: 6,
                        roles: 3
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        that.setData({
                            banners: res.data.data || []
                        });
                    }
                });
        },

        // 商品列表
        querygoods() {
            // this.setData({ goodslist: [] })
            _request
                .get(
                    '/mall-product/list',
                    {
                        status: 4,
                        offset: this.pageNo,
                        pageSize: this.pageSize,
                        type: 1,
                        sort: this.typeActive == 1 ? '' : this.typeActive == 2 ? 1 : this.active3 == 2 ? 3 : this.active3 == 1 ? 2 : '',
                        //1 销量 2 价格从高到低 3 从低到高
                        userId: uni.getStorageSync('userId'),
                        priceInterval: this.active2 + 1 //价格区间
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        let list = res.data.data || [];
                        list.forEach((e) => {
                            if (e.priceMaker) {
                                let str = e.priceMaker.toString();

                                if (str.length > 6) {
                                    e.marker = true;
                                } else {
                                    e.marker = false;
                                }
                            }
                        });
                        this.setData({
                            goodslist: this.pageNo > 0 ? [...this.goodslist, ...list] : list
                        });
                    }
                });
        },

        // 条件查询
        switchType(e) {
            this.setData({
                typeActive: e.currentTarget.dataset.id
            });

            if (e.currentTarget.dataset.id == 3) {
                //筛选
                this.setData({
                    active4: true
                });
            } else {
                //排序
                this.setData({
                    pageNo: 0,
                    active4: false,
                    active3: -1,
                    active2: -1
                });
                this.querygoods();
            }
        },

        // 价格排序
        opgaodi(e) {
            this.setData({
                active3: e.currentTarget.dataset.index
            });
        },

        // 价格区间
        bindtapscreen(e) {
            if (this.active2 == e.currentTarget.dataset.index) {
                this.setData({
                    active2: 0
                });
                return;
            }

            this.setData({
                active2: e.currentTarget.dataset.index
            });
        },

        // 重置
        chongzhifun() {
            this.setData({
                active3: -1,
                active2: -1
            });
        },

        hide() {
            this.setData({
                active4: false
            });
        },

        // 完成筛选
        closemak() {
            if (this.active3 < 0 && this.active2 < 0) {
                this.setData({
                    typeActive: 1
                });
            }

            this.setData(
                {
                    pageNo: 0
                },
                () => {
                    this.querygoods();
                }
            );
            this.setData({
                active4: false
            });
        },

        gotoNext: function (e) {
            const { item } = e.currentTarget.dataset;

            if (item.category == 2 && item.productSn) {
                //跳转商品详情
                uni.navigateTo({
                    url: '/shopingmall/goodsdetail/goodsdetail?productsn=' + item.productSn
                });
                return;
            }

            if (item.category == 3 && item.url) {
                if (item.url == '/firstpages/shopping/index') {
                    //商城
                    uni.switchTab({
                        url: item.url
                    });
                    return;
                }

                if (item.url == 'blind_box') {
                    //盲盒
                    if (this.isOver) {
                        uni.navigateTo({
                            url: '/pagesb/activity/detail'
                        });
                    }

                    return;
                }

                if (item.url === '/pages/maker/makerdetails/index') {
                    //拓客卡
                    let isMaker = uni.getStorageSync('maker')?.ismaker || false;

                    if (isMaker) {
                        uni.navigateTo({
                            url: item.url
                        });
                    } else {
                        uni.navigateTo({
                            url: '/pages/maker/buymaker/index'
                        });
                    }

                    return;
                }

                uni.navigateTo({
                    url: item.url
                });
            }

            if (item.category == 4 && item.url) {
                uni.navigateTo({
                    url: '/pagesb/webpage/index?url=' + encodeURIComponent(item.url)
                });
            }
        },

        //商品详情
        toDetail(e) {
            if (e.currentTarget.dataset.productsn) {
                uni.navigateTo({
                    url: '/shopingmall/goodsdetail/goodsdetail' + this.getparams(e.currentTarget.dataset)
                });
            }
        },

        getparams: function (item) {
            const list = [];

            for (const key in item) {
                if (key === 'url') {
                    continue;
                }

                list.push(key + '=' + item[key]);
            }

            if (list.length) {
                return '?' + list.join('&');
            } else {
                return '';
            }
        }
    }
};
</script>
<style>
/* shopingmall/markerlist/markerlist.wxss */
page {
    background: #fbfbfb;
}
.swiper_box {
    width: 710rpx;
    height: 360rpx;
}
.shangxia {
    width: 32rpx;
    height: 32rpx;
}
.column {
    background: #fff;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    overflow-x: auto;
}
.totop {
    position: fixed;
}

.markerpic {
    height: 34rpx;
    background: #fff6ef;
    border: 1rpx solid #ff8722;
    border-radius: 4rpx;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 22rpx;
    /* margin-left: 20rpx; */
    padding: 0 10rpx;
}

/* 筛选弹窗 */
.mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 50;
}
.maskbox {
    position: fixed;
    width: 100%;
    height: 500rpx;
    display: flex;
    justify-content: center;
    background: #fff;
}
.screenboxsbtn {
    display: flex;
    justify-content: space-between;
    margin: 40rpx 0;
}
.screenboxsbtnbox {
    width: 300rpx;
    height: 54rpx;
    border: 3rpx solid #e2e2e2;
    line-height: 54rpx;
    text-align: center;
    color: #999999;
    font-size: 28rpx;
}
.screenboxsbtnboxs {
    width: 260rpx;
    height: 82rpx;
    border: 3rpx solid #ff8722;
    text-align: center;
    line-height: 82rpx;
    border-radius: 41rpx;
    color: #ff8722;
    font-size: 32rpx;
}
.screenboxsbtnboxss {
    background: #ff8722;
    color: #fff;
}
.gaodis {
    border-color: #ff8722;
    background: #fedec2;
    color: #ff8722;
}
.screenbtns {
    padding: 0 10rpx;
    line-height: 42rpx;
    height: 42rpx;
    border: 1rpx solid #999999;
    border-radius: 21rpx;
    color: #999999;
}
.active2 {
    border: 1rpx solid #ff8722;
    background: #fedec2;
    color: #ff8722;
}
/* 列表样式 */
.goods_info {
    width: 340rpx;
    position: relative;
    box-shadow: 2px 4px 8px 0px #f5f5f5;
    padding-bottom: 10rpx;
}
.goods_img {
    width: 340rpx;
    height: 340rpx;
}
.goods_sold {
    position: absolute;
    left: 0;
    bottom: 10rpx;
    line-height: 46rpx;
    border-radius: 0 20rpx 20rpx 0;
    background-color: rgb(0, 0, 0, 0.5);
}

.markerpic-s {
    padding: 4rpx 10rpx;
    font-size: 24rpx;
    background-color: #ff8722;
    color: #fff;
    position: absolute;
    left: 4rpx;
    top: 4rpx;
    border-top-left-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
}
</style>
